<template>
  <view class="signature flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack :title="'家风家训'" is-fixed
                  background="#FFFFFF"
                  @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <view class="signature_textare mt_25">
      <textarea class="signature_textare_class"
                v-model="page.signatureValue"
                :style="{
                  minHeight : '800rpx'
                }"
                :maxlength="'500'"
                autofocus="true"
                :placeholder="'请输入家风家训'"
                placeholder-class="signature_textarePlaceholder"
                auto-height
      ></textarea>
    </view>
    <view class="signature_tips mt_10 flex align-center justify-between">
      <view class="signature_tips_left ml_14">
        <text class="signature_tips_left_text">最多输入{{ '500' }}字</text>
        <text class="signature_tips_right_text ml_14">{{
            !!page.signatureValue ? page.signatureValue.length : 0
          }}/{{ '500' }}
        </text>
      </view>
      <view class="signature_tips_button_class flex align-center justify-center mr_14" @click.stop="setSignature">
        <text class="signature_tips_button_class_text">保存</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onLoad, onReady } from '@dcloudio/uni-app';
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import sheep from '@/sheep';

  const page = reactive({
    signatureValue: '',
    headerHeight: 0,
    options: {},
  });

  onLoad((options) => {
    let str = uni.getStorageSync('family_content');
    if (!!str) {
      page.signatureValue = JSON.parse(str);
    }
    page.options = options;
  });

  onReady(() => {

  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function setSignature() {
    const { data } = await sheep.$api.family.updateFamilyCulture({
      family_id: page.options.family_id,
      content: page.signatureValue,
    });
    uni.navigateBack();
  }
</script>

<style lang="scss">
  .signature {
    /* #ifdef H5 */
    margin: auto;
    /* #endif */
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;
    overflow: hidden;

    .signature_textare {
      width: 661rpx;
      background: #EDEDED;
      border-radius: 17rpx 17rpx 17rpx 17rpx;
      padding: 16rpx 14rpx;
      overflow: hidden;

      .signature_textare_class {
        width: 633rpx;
        min-height: 202rpx;
      }

      .signature_textarePlaceholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }

    }

    .signature_tips {
      width: 661rpx;

      .signature_tips_left {
        .signature_tips_left_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }

        .signature_tips_right_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }
      }

      .signature_tips_right {
        .signature_tips_right_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }

      }

      .signature_tips_button_class {
        width: 133rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .signature_tips_button_class_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }

    .signature_button {
      width: 661rpx;

      .signature_tips_button_class {
        width: 133rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .signature_tips_button_class_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }
  }
</style>
